

import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { FontAwesome6 } from '@expo/vector-icons';
import SettingItem from './components/SettingItem';
import ConfirmModal from './components/ConfirmModal';
import SuccessToast from './components/SuccessToast';
import styles from './styles';

interface SettingItemData {
  id: string;
  title: string;
  description: string;
  icon: string;
  iconColor: string;
  iconBgColor: string;
  onPress: () => void;
  rightContent?: React.ReactNode;
}

const SettingsScreen = () => {
  const router = useRouter();
  const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
  const [isSuccessToastVisible, setIsSuccessToastVisible] = useState(false);
  const [toastMessage, setToastMessage] = useState('');
  const [confirmCallback, setConfirmCallback] = useState<(() => void) | null>(null);

  const handleBackPress = () => {
    if (router.canGoBack()) {
      router.back();
    }
  };

  const showToast = (message: string) => {
    setToastMessage(message);
    setIsSuccessToastVisible(true);
    setTimeout(() => {
      setIsSuccessToastVisible(false);
    }, 3000);
  };

  const showConfirmModal = (callback: () => void) => {
    setConfirmCallback(() => callback);
    setIsConfirmModalVisible(true);
  };

  const hideConfirmModal = () => {
    setIsConfirmModalVisible(false);
    setConfirmCallback(null);
  };

  const handleConfirmAction = () => {
    hideConfirmModal();
    if (confirmCallback) {
      confirmCallback();
    }
  };

  const handleNotificationSettingsPress = () => {
    router.push('/p-notification_settings');
  };

  const handleAboutUsPress = () => {
    router.push('/p-about_us');
  };

  const handleAccountSecurityPress = () => {
    showToast('功能开发中');
  };

  const handlePrivacySettingsPress = () => {
    showToast('功能开发中');
  };

  const handleDataSyncPress = () => {
    showToast('正在同步数据...');
  };

  const handleClearCachePress = () => {
    showConfirmModal(() => {
      showToast('缓存已清除');
    });
  };

  const settingItems: SettingItemData[] = [
    {
      id: 'notification',
      title: '通知设置',
      description: '管理审批通知方式和偏好',
      icon: 'bell',
      iconColor: '#6366f1',
      iconBgColor: 'rgba(99, 102, 241, 0.2)',
      onPress: handleNotificationSettingsPress,
    },
    {
      id: 'about',
      title: '关于我们',
      description: '查看应用版本和版权信息',
      icon: 'info-circle',
      iconColor: '#8b5cf6',
      iconBgColor: 'rgba(139, 92, 246, 0.2)',
      onPress: handleAboutUsPress,
    },
    {
      id: 'security',
      title: '账户安全',
      description: '修改密码和安全设置',
      icon: 'shield-alt',
      iconColor: '#06b6d4',
      iconBgColor: 'rgba(6, 182, 212, 0.2)',
      onPress: handleAccountSecurityPress,
    },
    {
      id: 'privacy',
      title: '隐私设置',
      description: '管理个人信息和隐私权限',
      icon: 'user-secret',
      iconColor: '#f59e0b',
      iconBgColor: 'rgba(245, 158, 11, 0.2)',
      onPress: handlePrivacySettingsPress,
    },
    {
      id: 'sync',
      title: '数据同步',
      description: '同步审批数据和设置',
      icon: 'sync-alt',
      iconColor: '#10b981',
      iconBgColor: 'rgba(16, 185, 129, 0.2)',
      onPress: handleDataSyncPress,
      rightContent: (
        <View style={styles.syncStatusContainer}>
          <Text style={styles.syncStatusText}>已同步</Text>
          <FontAwesome6 name="chevron-right" style={styles.chevronIcon} />
        </View>
      ),
    },
    {
      id: 'cache',
      title: '清除缓存',
      description: '清理应用缓存数据',
      icon: 'trash-alt',
      iconColor: '#ef4444',
      iconBgColor: 'rgba(239, 68, 68, 0.2)',
      onPress: handleClearCachePress,
      rightContent: <Text style={styles.cacheSizeText}>25.6 MB</Text>,
    },
  ];

  return (
    <SafeAreaView style={styles.container}>
      {/* 顶部导航栏 */}
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton} 
          onPress={handleBackPress}
          activeOpacity={0.7}
        >
          <FontAwesome6 name="arrow-left" style={styles.backIcon} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>设置</Text>
        <View style={styles.headerPlaceholder} />
      </View>

      {/* 主要内容区域 */}
      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        <View style={styles.content}>
          {/* 设置选项列表 */}
          <View style={styles.settingsList}>
            {settingItems.map((item) => (
              <SettingItem
                key={item.id}
                title={item.title}
                description={item.description}
                icon={item.icon}
                iconColor={item.iconColor}
                iconBgColor={item.iconBgColor}
                onPress={item.onPress}
                rightContent={item.rightContent}
              />
            ))}
          </View>

          {/* 版本信息 */}
          <View style={styles.versionInfo}>
            <Text style={styles.versionText}>流批通 v1.0.0</Text>
            <Text style={styles.copyrightText}>© 2024 流批通科技有限公司</Text>
          </View>
        </View>
      </ScrollView>

      {/* 确认对话框 */}
      <ConfirmModal
        visible={isConfirmModalVisible}
        title="确认清除缓存？"
        message="清除缓存后，部分数据需要重新加载，是否继续？"
        onCancel={hideConfirmModal}
        onConfirm={handleConfirmAction}
      />

      {/* 成功提示 */}
      <SuccessToast
        visible={isSuccessToastVisible}
        message={toastMessage}
      />
    </SafeAreaView>
  );
};

export default SettingsScreen;

